<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学费缴纳信息提交</title>
    <!-- 引入 Tailwind CSS（通过 CDN，简化样式配置） -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome（图标库） -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 自定义配置（颜色、工具类） -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 主色调（蓝色）
                    },
                }
            }
        }
    </script>

    <!-- 自定义 Tailwind 工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-xl;
            }
            .card-effect {
                @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans text-gray-800">
    <!-- 页面容器 -->
    <div class="container mx-auto px-4 py-8 max-w-md">
        <!-- 标题区域 -->
        <div class="text-center mb-8">
            <h1 class="text-[clamp(1.8rem,5vw,2.2rem)] font-bold text-gray-800 mb-2">天津理工大学2025-2026学年学费缴纳系统</h1>
            <p class="text-gray-500">请填写信息后提交</p>
        </div>

        <!-- 表单区域 -->
        <div id="formSection" class="card-effect p-6 mb-8">
            <form id="studentForm" class="space-y-5">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" id="name" name="name" required
                            class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none"
                            placeholder="请输入姓名">
                    </div>
                </div>

                <div>
                    <label for="studentId" class="block text-sm font-medium text-gray-700 mb-1">学号</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-id-card"></i>
                        </span>
                        <input type="text" id="studentId" name="studentId" required
                            class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none"
                            placeholder="请输入学号">
                    </div>
                </div>

                <button type="submit" class="w-full flex items-center justify-center gap-2 btn-primary">
                    <span>提交信息</span>
                    <i class="fa fa-paper-plane"></i>
                </button>
            </form>
        </div>

        <!-- 信息展示区域（默认隐藏） -->
        <div id="infoSection" class="card-effect p-6 mb-8 hidden">
            <h2 class="text-xl font-bold mb-4 pb-2 border-b border-gray-100">学生信息确认</h2>

            <div class="space-y-4">
                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <span class="text-gray-600">姓名:</span>
                    <span id="displayName" class="font-medium"></span>
                </div>

                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <span class="text-gray-600">学号:</span>
                    <span id="displayStudentId" class="font-medium"></span>
                </div>

                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <span class="text-gray-600">班级:</span>
                    <span id="displayClass" class="font-medium"></span>
                </div>

                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <span class="text-gray-600">专业:</span>
                    <span id="displayMajor" class="font-medium"></span>
                </div>

                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <span class="text-gray-600">入学年份:</span>
                    <span id="displayYear" class="font-medium"></span>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <footer class="text-center text-gray-500 text-sm mt-10">
            <p>© 2025 学费缴纳系统</p>
        </footer>
    </div>

    <!-- 二维码弹窗（默认隐藏） -->
    <div id="qrcodeModal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden opacity-0 transition-opacity duration-300">
        <div class="bg-white rounded-xl p-6 max-w-xs w-full mx-4 transform transition-transform duration-300 scale-95">
            <div class="text-center mb-4">
                <h3 class="text-lg font-bold">学费收款二维码</h3>
                <p class="text-gray-500 text-sm">请用支付宝扫描下方二维码</p>
            </div>

            <!-- 收款二维码（替换为你的图片路径） -->
            <div class="bg-gray-100 rounded-lg p-4 flex items-center justify-center mb-4">
                <img id="qrcodeImage" src="img/qrcode.jpg" alt="学费收款二维码" class="max-w-full h-auto rounded">
            </div>

            <button id="closeModal" class="w-full py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-300 font-medium">
                关闭
            </button>
        </div>
    </div>

    <!-- 引入交互脚本 -->
    <script src="js/app.js"></script>
</body>
</html>
